<template>
  <div class="fault-library-setting">
    <div class="contain">
      <div class="setting-item setting-item-box">
        <div class="left">
          <div class="title-info">{{ $t('faultLibrary.setting.title1') }}</div>
          <div class="des-info">{{ $t('faultLibrary.setting.description') }}</div>
        </div>
        <el-button class="right" type="primary" @click="openFieldPage">{{ $t('common.base.setFieldData') }}</el-button>
      </div>

      <div class="setting-item-box">
        <div class="title-info flex-x jus-bet">
          {{ $t('faultLibrary.setting.title2') }}
        </div>
        <div class="des-info">{{ $t('faultLibrary.setting.tips1') }}</div>
        <el-form ref="settingDataFormDom" :model="settingData" :rules="settingDataRules">
          <el-form-item prop="tipContent">
            <el-input :disabled="btnLoading" class="w-576 mar-r-16" maxlength="100" v-model="settingData.tipContent" @blur="saveSettingData(0)"></el-input>
          </el-form-item>
        </el-form>
        <div>
          <span class="mar-r-8">{{ $t('faultLibrary.setting.label1') }}</span
          ><el-switch :disabled="btnLoading" v-model="settingData.isAllOpen" @change="saveSettingData(1)"></el-switch>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { openAccurateTab, notification, toast } from '@src/util/platform';

import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum';

import { getFaultSettingData, saveFaultSettingData } from '@src/api/Fault';
import { t } from '@src/locales';
import { debounce } from 'lodash';

export default defineComponent({
  name: 'FaultLibrarySetting',
  setup() {
    function openFieldPage() {
      openAccurateTab({
        type: PageRoutesTypeEnum.PageFaultLibrarySolutionFields,
      });
    }
    const settingData = ref({});
    const btnLoading = ref(false);
    const settingDataFormDom = ref(null);
    const settingDataRules = {
      tipContent: [
        {
          validator: (rule, value, callback) => {
            if (value.trim() === '') {
              callback(new Error(t('common.base.moduleIsNotNull', { module: '' })));
            } else {
              callback();
            }
          },
          trigger: 'blur',
        },
      ],
    };
    function initSettingData(data = null) {
      if (data) {
        settingData.value = data;
      } else {
        settingData.value = {
          tipContent: '',
          isAllOpen: false,
        };
      }
    }
    function getSettingData() {
      getFaultSettingData().then(res => {
        if (res.status === 0) {
          initSettingData(res.data);
        }
      });
    }
    const saveSettingData = debounce(function (type) {
      const { isAllOpen, tipContent, id } = settingData.value;
      settingDataFormDom.value.validate().then(res => {
        if (!res) return;
        const params = {
          [type === 0 ? 'tipContent' : 'isAllOpen']: type === 0 ? tipContent : isAllOpen,
          id,
        };
        btnLoading.value = true;
        saveFaultSettingData(params)
          .then(res => {
            if (res.status !== 0) {
              notification({
                title: t('common.base.fail'),
                message: res.message,
                type: 'error',
              });
            }
          })
          .finally(() => {
            setTimeout(() => {
              btnLoading.value = false;
            }, 500);
          });
      });
    }, 500);
    getSettingData();
    return {
      openFieldPage,
      settingData,
      btnLoading,
      saveSettingData,
      settingDataRules,
      settingDataFormDom,
    };
  },
});
</script>

<style lang="scss" scoped>
.fault-library-setting {
  border-radius: 4px;
  box-sizing: border-box;
  height: 100vh;
  padding: 16px;
  .contain {
    background: #fff;
    height: 100%;
    padding: 16px;
  }
  .setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
  }
  .title-info {
    line-height: 22px;
    color: $text-color-primary;
    font-weight: 600;
  }
  .des-info {
    line-height: 22px;
    color: $text-color-regular;
  }
  .w-576 {
    width: 576px;
  }
  .setting-item-box {
    line-height: 22px;
    &:not(:last-child) {
      margin-bottom: 24px;
    }
    & > div {
      margin-bottom: 8px;
    }
  }
}
</style>
